<template>
  <div class="ratio">
    <div class="arrow" :class="rate > 0 ? 'arrow-up' : 'arrow-down'"></div>
    同比增幅 {{ rate > 0 ? '+' : '' }}{{ rate + (rate === '/' ? '' : '%') }}
    <div class="arrow ml-2" :class="rate2 > 0 ? 'arrow-up' : 'arrow-down'"></div>
    环比增幅 {{ rate2 > 0 ? '+' : '' }}{{ rate2 + (rate2 === '/' ? '' : '%') }}
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    rate: number | string
    rate2: number
  }>(),
  {
    rate: 0,
    rate2: 0,
  },
)
</script>

<style scoped>
.ratio {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.arrow {
  border-left: 3px solid transparent;
  /* 缩小箭头尺寸 */
  border-right: 3px solid transparent;
  margin-right: 3px;
}

.arrow-up {
  border-bottom: 5px solid #00c292;
}

.arrow-down {
  border-top: 5px solid #f8514f;
}
</style>
